<template>
	<div>
		<jk-table :cell-style="cellStyle" :data="tableData" :height="height" :loading="loading" border>
			<vxe-column
				v-for="(item, index) in tableColumnList"
				:key="index"
				:align="item.align"
				:field="item.keyName"
				:fixed="item.fixed ? item.fixed : ''"
				:min-width="item.minWidth"
				:sortable="item.sortable"
				:title="item.title"
				:width="item.width"
			>
				<template #default="scope">

					<template v-if="item.keyName === 'specSheetAlarm'">
						<!--                        品种-->
						<jk-state-bar
							:show-icon="false"
							:state="scope.row.specSheetAlarm.toString()"
							:state-list="packageStateList"
						></jk-state-bar>
					</template>
					<template v-else-if="item.keyName === 'productAlarm'">
						<!--                        工艺单缺失-->
						<jk-state-bar
							:show-icon="false"
							:state="scope.row.productAlarm.toString()"
							:state-list="varietyList"
						></jk-state-bar>
					</template>
					<template v-else-if="item.keyName === 'technologyItemName'">
						<div
							v-for="(i, ids) in scope.row.itemList"
							:key="ids"
							class="borderLine"
						>

							<span :class="{ red: i.ifOverrun }">{{ i.technologyItemName }}</span>
						</div>
					</template>
					<template
						v-else-if="['technologySetValue', 'maxValue', 'minValue', 'value'].includes(item.keyName)"
					>
						<div v-for="(i, ids) in scope.row.itemList" :key="ids" class="borderLine">
							{{ i[item.keyName] === null ? '/' : i[item.keyName] }}
						</div>
					</template>
					<template v-else>

						<span>{{ scope.row[item.keyName] }}</span>
					</template>
				</template>
			</vxe-column>
		</jk-table>
	</div>
</template>

<script>
    import { systemUserColumnConfigGet } from '@/api/system/column-config';

    export default {
        components: {},
        props: {
            tableData: {
                type: Array,
                default() {
                    return [];
                }
            },
            searchParams: {
                type: Object,
                default() {
                    return {};
                }
            },
            height: {
                type: [String, Number],
                default: 0
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                tableColumnList: [],
                selectedRowItem: {},
                detailDialogState: false,
                packageStateList: [
                    { id: 'false', name: '√' },
                    { id: 'true', name: '×' }
                ],
                varietyList: [
                    { id: 'false', name: '√' },
                    { id: 'true', name: '×' }
                ]
            };
        },
        methods: {
            cellStyle({ row, column, rowIndex, columnIndex }) {
                if (column.field === 'specSheetAlarm' && row.specSheetAlarm) {
                    return {
                        boxShadow: 'inset 0 0 0px 0.5px #dcdff6', // 淡紫色阴影
                        background: 'rgba(128, 0, 128, 0.3)' // 淡紫色背景
                        // color: 'rgb(114, 46, 209) !important' // 紫色文字
                    };
                } else if (column.field === 'productAlarm' && row.productAlarm) { // 品种计划
                    return {

                        boxShadow: 'inset 0 0 0px 0.5px #dcdff6', // 淡橙色阴影
                        background: 'rgba(255, 165, 0, 0.3)' // 淡橙色背景
                        // color: 'rgb(255, 87, 34) !important' // 深橙色文字
                    };
                } else {
                    return {};
                }
            },
            getMenuColumnListRequest() {
                return systemUserColumnConfigGet({ path: 'technologicalMonitor', filterShow: true }).then(res => {
                    if (res.data.status === 200) {
                        this.tableColumnList = res.data.res.columnConfigList && res.data.res.columnConfigList.length ? res.data.res.columnConfigList[0].itemList : [];
                    }
                });
            },
            onVisibleChange(e) {
                this.detailDialogState = e;
            },
            onMachine(rowItem) {
                this.selectedRowItem = rowItem;
                if (rowItem.deviceRecordNumber.includes('LT') || rowItem.deviceRecordNumber.includes('lt')) {
                    // this.detailDialogState = true;
                }
            },
            updateCeshiStyles() {
                this.$nextTick(() => {
                    const vxeCells = document.querySelectorAll('.vxe-cell');
                    vxeCells.forEach(cell => {
                        const ceshiElements = cell.querySelectorAll('.borderLine');
                        if (ceshiElements.length > 0) {
                            cell.style.padding = '0';
                            ceshiElements.forEach((element, index) => {
                                if (index === 0 || index === ceshiElements.length - 1) {
                                    element.style.padding = '0px 10px';
                                } else {
                                    element.style.padding = '3px 10px';
                                }
                                element.style.borderBottom = index === ceshiElements.length - 1 ? 'none' : '1px solid #dcdff6';
                            });
                        }
                    });
                });
            }
        },
        mounted() {
            this.getMenuColumnListRequest().then(() => {
                this.updateCeshiStyles();
            });
        },
        updated() {
            this.updateCeshiStyles();
        }
    };
</script>
<style scoped>
.red {
//color: #F56C6C;
    background: rgba(255, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    display: block ;
}
</style>
